<template>
  <div>
    <header class="flex">
      <div class="avatar-wrap">
        <img :src="userInfo.profile.avatarUrl" alt="">
      </div>
      <div class="mgl-12 desc-area">
        <p class="font-24 font-bold">{{ userInfo.profile.nickname }}</p>
        <p>
          <span class="level-text">等级:{{ userInfo.level }}</span>
          <span class="mgl-6">
            <i
                v-if="userInfo.profile.gender == 1"
                style="color: #3da1d1"
                class="el-icon-male font-20"
              ></i>
              <i
                v-else-if="userInfo.profile.gender == 2"
                style="color: #ea5a95"
                class="el-icon-female font-20"
              ></i>
          </span>
        </p>
        <p class="flex numInfo">
          <span>
            <p class="font-20 font-bold">{{ userInfo.profile.eventCount }}</p>
            <p>动态</p>
          </span>
          <span>
            <p class="font-20 font-bold">{{ userInfo.profile.follows }}</p>
            <p>关注</p>
          </span>
          <span>
            <p class="font-20 font-bold">{{userInfo.profile.followeds }}</p>
            <p>粉丝</p>
          </span>
        </p>
        <p>个人介绍: {{ userInfo.profile.signature }}</p>
      </div>
    </header>
    <tab-menu :tabsMenuList="tabList" @tabsChange="tabsChange"></tab-menu>
    <cover :imgList="imgData" @clickToDo="toPlayListDetail">
      <template v-slot:img="scope">
          <img :src="scope.item.coverImgUrl + '?param=300y300'" alt="">
      </template>
    </cover>
  </div>
</template>

<script>
import TabMenu from '@/components/TabMenu/tabMenu.vue'
import Cover from '@/components/CoverImg/cover.vue'
import { getUserDetail } from '@/api/user.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      tabList: [{ name: '创建的歌单' }, { name: '收藏的歌单' }],
      // 用户信息
      userInfo: {},
      index: '0'
    }
  },
  created () {
    this.getUserInfo(this.$route.params.id)
  },
  components: {
    TabMenu,
    Cover
  },
  methods: {
    async getUserInfo (uid) {
      const res = await getUserDetail(uid)
      console.log(res)
      if (res.data.code !== 200) return this.$message.error('获取用户信息失败')
      this.userInfo = res.data
    },
    tabsChange (index) {
      this.index = index
    },
    toPlayListDetail (id) {
      this.$router.push(`/playListDetail/${id}`)
    }
  },
  computed: {
    ...mapState(['profile', 'playList']),
    imgData () {
      if (this.index === '1') return this.subList
      else return this.personalList
    },
    // 自己创建的歌单,先检查一些playlist存不存在
    personalList () {
      return this.playList ? this.playList.filter(item => item.userId === this.profile.userId) : []
    },
    // 收藏的歌单,先检查一些playlist存不存在,不然filter会报错Cannot read properties of undefined (reading 'filter')
    subList () {
      return this.playList ? this.playList.filter(item => item.userId !== this.profile.userId) : []
    }

  }
}
</script>

<style lang="less" scoped>
.avatar-wrap {
  width: 200px;
  height: 200px;
  img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
}
.desc-area > p{
  text-align: left;
  &:not(:first-child) {
    margin-top: 14px;
  }
}
.level-text {
  border: 1px solid #ec4141;
  padding: 0 2px;
  color: #ec4141;
}
.numInfo > span {
  width: 80px;
  text-align: center;
  &:not(:last-child) {
    border-right: 1px solid #e6e6e6;;
  }

}
</style>
